<template>
	<view>
		<view class="bg-fff mt10">
			<view class="bb px15 py10 pos-rel" @tap="chooseImage">
				<u-input :readonly="true" border="none" fontSize="30" type="text" :suffixIconStyle="{ 'font-size': '35rpx' }" suffixIcon="arrow-right">
					<view class="c-333 fs14 dis-flex flex-align-center" slot="prefix">
						<text style="width: 180rpx">
							<text class="c-red">*</text>
							头像
						</text>
						<u-image :src="$store.state.host + userInfo.avatar" errorIcon="/static/images/person.png" width="80" height="80"></u-image>
					</view>
				</u-input>
				<view class="pos-abs wd100" style="left: 0; top: 0; height: 40px"></view>
			</view>
			<view class="bb px15 py10">
				<u-input
					:disabled="realnames"
					disabled-color="#fff"
					placeholder="请输入姓名"
					border="none"
					fontSize="30"
					v-model="userInfo.realname"
					:clearable="true"
					type="text"
					maxlength="30"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						姓名
					</view>
				</u-input>
			</view>
			<view class="bb px15 py10">
				<u-input
					:disabled="card_ids"
					disabled-color="#fff"
					placeholder="请输入身份证号"
					border="none"
					fontSize="30"
					v-model="userInfo.card_id"
					:clearable="true"
					type="text"
					maxlength="20"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						身份证号
					</view>
				</u-input>
			</view>
			<view class="bb px15 py10 pos-rel" style="z-index: 9999" @tap="showTime = !rztimes">
				<u-input
					placeholder="请选择"
					@tap="showTime = true"
					:readonly="true"
					border="none"
					fontSize="30"
					v-model="userInfo.rztime"
					type="text"
					suffixIcon="arrow-right"
					:suffixIconStyle="{ 'font-size': '35rpx' }"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						入职日期
					</view>
				</u-input>
				<view class="pos-abs wd100" style="left: 0; top: 0; height: 40px"></view>
			</view>
			<view class="bb px15 py10">
				<u-input
					:disabled="bankusers"
					disabled-color="#fff"
					placeholder="请输入银行卡姓名"
					border="none"
					fontSize="30"
					v-model="userInfo.bankuser"
					:clearable="true"
					type="text"
					maxlength="20"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						银行卡姓名
					</view>
				</u-input>
			</view>
			<view class="bb px15 py10">
				<u-input
					:disabled="bankcards"
					disabled-color="#fff"
					placeholder="请输入银行卡姓号"
					border="none"
					fontSize="30"
					v-model="userInfo.bankcard"
					:clearable="true"
					type="number"
					maxlength="20"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						银行卡号
					</view>
				</u-input>
			</view>
			<view class="bb px15 py10">
				<u-input
					:disabled="openbanks"
					disabled-color="#fff"
					placeholder="请输入开户行"
					border="none"
					fontSize="30"
					v-model="userInfo.openbank"
					:clearable="true"
					type="text"
					maxlength="20"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						开户行
					</view>
				</u-input>
			</view>
			<view class="px15 py10 dis-flex flex-align-center bb" v-for="(item, index) in companyList" :key="index">
				<u-input class="flex" placeholder="请输入任职公司" border="none" fontSize="30" v-model="item.company" type="text" maxlength="50" :clearable="true">
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						任职公司
					</view>
				</u-input>
				<u-icon v-if="index == 0" @click="companyChange(1, index)" class="ml10" name="plus-circle-fill" color="#5B769F" size="50" label-size="28"></u-icon>
				<u-icon v-else @click="companyChange(2, index)" class="ml10" name="minus-circle" color="#5B769F" size="50" label-size="28"></u-icon>
			</view>

			<view class="bb px15 py10 pos-rel" @tap="cardimg1">
				<u-input :readonly="true" border="none" fontSize="30" type="text" :suffixIconStyle="{ 'font-size': '35rpx' }" suffixIcon="arrow-right">
					<view class="c-333 fs14 dis-flex flex-align-center" slot="prefix">
						<text style="width: 180rpx">
							<text class="c-red">*</text>
							身份证正面
						</text>
						<u-image :src="$store.state.host + userInfo.cardimg1" errorIcon="/static/images/person.png" width="80" height="80"></u-image>
					</view>
				</u-input>
				<view class="pos-abs wd100" style="left: 0; top: 0; height: 40px"></view>
			</view>

			<view class="bb px15 py10 pos-rel" @tap="cardimg2">
				<u-input :readonly="true" border="none" fontSize="30" type="text" :suffixIconStyle="{ 'font-size': '35rpx' }" suffixIcon="arrow-right">
					<view class="c-333 fs14 dis-flex flex-align-center" slot="prefix">
						<text style="width: 180rpx">
							<text class="c-red">*</text>
							身份证反面
						</text>
						<u-image :src="$store.state.host + userInfo.cardimg2" errorIcon="/static/images/person.png" width="80" height="80"></u-image>
					</view>
				</u-input>
				<view class="pos-abs wd100" style="left: 0; top: 0; height: 40px"></view>
			</view>

			<view class="bb px15 py10 pos-rel" @tap="diploma">
				<u-input :readonly="true" border="none" fontSize="30" type="text" :suffixIconStyle="{ 'font-size': '35rpx' }" suffixIcon="arrow-right">
					<view class="c-333 fs14 dis-flex flex-align-center" slot="prefix">
						<text style="width: 180rpx">
							<text class="c-red">*</text>
							毕业证
						</text>
						<u-image :src="$store.state.host + userInfo.diploma" errorIcon="/static/images/person.png" width="80" height="80"></u-image>
					</view>
				</u-input>
				<view class="pos-abs wd100" style="left: 0; top: 0; height: 40px"></view>
			</view>

			<view class="bb px15 py10">
				<u-input
					placeholder="请输入紧急联系人"
					border="none"
					fontSize="30"
					v-model="userInfo.emergent_user"
					:clearable="true"
					type="text"
					maxlength="20"
					:disabled="emergent_users"
					disabled-color="#fff"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						紧急联系人
					</view>
				</u-input>
			</view>

			<view class="bb px15 py10">
				<u-input
					:disabled="emergent_mobiles"
					disabled-color="#fff"
					placeholder="请输入联系人号码"
					border="none"
					fontSize="30"
					v-model="userInfo.emergent_mobile"
					:clearable="true"
					type="text"
					maxlength="20"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						联系人号码
					</view>
				</u-input>
			</view>

			<view class="bb px15 py10">
				<u-input
					:disabled="addressDis"
					disabled-color="#fff"
					placeholder="请输入家庭住址"
					border="none"
					fontSize="30"
					v-model="userInfo.address"
					:clearable="true"
					type="text"
					maxlength="30"
				>
					<view class="c-333 fs14 dis-flex" slot="prefix" style="width: 180rpx">
						<text class="c-red">*</text>
						家庭住址
					</view>
				</u-input>
			</view>
		</view>
		<view style="height: 31rpx"></view>
		<view style="color: #999; font-size: 28rpx; text-indent: 2em; margin: 0 20rpx">
			个人身份信息请如实认真填写、如发现提供虚假信息视同诈骗，公司保留追究法律责任的权利，完善信息可获得100积分
		</view>
		<view style="height: 130rpx"></view>
		<view class="btn-submit-box" style="z-index: 999">
			<button class="btn-submit bg-common c-fff" :loading="submitLoading" @tap="$u.throttle(formSubmit)">保存</button>
		</view>
		<u-datetime-picker
			:show="showTime"
			v-model="value1"
			@confirm="dateConfirm"
			itemHeight="88"
			mode="date"
			:closeOnClickOverlay="true"
			@close="showTime = false"
			@cancel="showTime = false"
		></u-datetime-picker>
	</view>
</template>

<script>
import validate from '../../common/thformvalidate';
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				realname: '',
				card_id: '',
				rztime: '',
				cardimg1: '',
				cardimg2: '',
				diploma: '',
				emergent_user: '',
				emergent_mobile: '',
				address: ''
			},
			submitLoading: false,

			showTime: false,
			value1: Number(new Date()),
			addressDis: false,
			realnames: false,
			avatars: false,
			bankcards: false,
			bankusers: false,
			card_ids: false,
			cardimg: false,
			cardimgs: false,
			diplomas: false,
			emergent_mobiles: false,
			emergent_users: false,
			rztimes: false,
			openbanks: false,
			companyList: [
				{
					company: ''
				}
			]
		};
	},

	onLoad(option) {
		this.loadUserInfo();
		uni.$on('upload', data => {
			this.userInfo.avatar = data;
		});

		uni.$on('cardimg1', data => {
			this.userInfo.cardimg1 = data;
		});

		uni.$on('cardimg2', data => {
			this.userInfo.cardimg2 = data;
		});

		uni.$on('diploma', data => {
			this.userInfo.diploma = data;
		});
	},

	methods: {
		uploadHeadIcon(e) {
			this.uploadImage([e.base64 || e.path]);
		},

		companyChange(type, index) {
			if (type == 1) {
				if (this.companyList.length >= 5) {
					this.$api.toast('最多添加5个');
					return;
				}
				this.companyList.push({
					company: ''
				});
			} else {
				this.companyList.splice(index, 1);
			}
		},

		loadUserInfo() {
			this.$http.get(this.$config.UrlUserInfo).then(res => {
				if (res.code == 1) {
					console.log(res);
					this.userInfo = res.data || {};

					if (this.userInfo.address !== '') this.addressDis = true;
					if (this.userInfo.realname !== '') this.realnames = true;
					if (this.userInfo.avatar !== '') this.avatars = true;
					if (this.userInfo.bankcard !== '') this.bankcards = true;
					if (this.userInfo.bankuser !== '') this.bankusers = true;
					if (this.userInfo.card_id !== '') this.card_ids = true;
					if (this.userInfo.cardimg1 !== '') this.cardimg = true;
					if (this.userInfo.cardimg2 !== '') this.cardimg2 = true;
					if (this.userInfo.diploma !== '') this.diplomas = true;
					if (this.userInfo.emergent_mobile !== '') this.emergent_mobiles = true;
					if (this.userInfo.emergent_user !== '') this.emergent_users = true;
					if (this.userInfo.rztime !== '') this.rztimes = true;
					if (this.userInfo.openbank !== '') this.openbanks = true;

					if (this.userInfo.company) {
						let mCompanyList = [];
						let mList = this.userInfo.company.split('@#');
						// console.log(JSON.stringify(mList));
						mList.forEach(item => {
							mCompanyList.push({
								company: item
							});
						});
						this.companyList = mCompanyList;
					}
				} else this.$api.toast(res.msg);
			});
		},

		//提交
		formSubmit(e) {
			var jsonData = {
				avatar: this.userInfo.avatar,
				realname: this.userInfo.realname,
				card_id: this.userInfo.card_id,
				rztime: this.userInfo.rztime,
				bankuser: this.userInfo.bankuser,
				bankcard: this.userInfo.bankcard,
				openbank: this.userInfo.openbank,
				cardimg1: this.userInfo.cardimg1,
				cardimg2: this.userInfo.cardimg2,
				diploma: this.userInfo.diploma,
				emergent_user: this.userInfo.emergent_user,
				emergent_mobile: this.userInfo.emergent_mobile,
				address: this.userInfo.address
			};
			var rule = [
				{
					name: 'avatar',
					notnull: true,
					checkType: null,
					title: '头像'
				},
				{
					name: 'realname',
					notnull: true,
					checkType: null,
					title: '姓名'
				},
				{
					name: 'card_id',
					notnull: true,
					checkType: null,
					title: '身份证号'
				},
				{
					name: 'rztime',
					notnull: true,
					checkType: null,
					title: '入职日期'
				},
				{
					name: 'bankuser',
					notnull: true,
					checkType: null,
					title: '银行卡姓名'
				},
				{
					name: 'bankcard',
					notnull: true,
					checkType: null,
					title: '银行卡号'
				},
				{
					name: 'openbank',
					notnull: true,
					checkType: null,
					title: '开户行'
				},
				{
					name: 'cardimg1',
					notnull: true,
					checkType: null,
					title: '身份证正面'
				},
				{
					name: 'cardimg2',
					notnull: true,
					checkType: null,
					title: '身份证反面'
				},
				{
					name: 'diploma',
					notnull: true,
					checkType: null,
					title: '毕业证'
				},
				{
					name: 'emergent_user',
					notnull: true,
					checkType: null,
					title: '紧急联系人'
				},
				{
					name: 'emergent_mobile',
					notnull: true,
					checkType: null,
					title: '联系人号码'
				},
				{
					name: 'address',
					notnull: true,
					checkType: null,
					title: '家庭住址'
				}
			];
			let mCompanyName = '';
			this.companyList.forEach(item => {
				if (item.company) {
					if (mCompanyName == '') mCompanyName = item.company;
					else mCompanyName += '@#' + item.company;
				}
			});
			if (!mCompanyName) {
				this.$api.toast('任职公司不能为空');
				return;
			}
			jsonData.company = mCompanyName;
			if (!validate.check(jsonData, rule)) return;
			this.$http
				.post(this.$config.UrlUpdateUserInfo, jsonData, {
					header: {
						'content-type': 'application/json'
					}
				})
				.then(res => {
					// uni.setStorageSync('disabled', this.);
					this.$api.toast(res.msg);
					if (res.code == 1) {
						getApp().loadUserInfo();
						this.$api.back();
					}
				});
		},

		dateConfirm(e) {
			this.showTime = false;
			this.userInfo.rztime = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
		},

		chooseImage() {
			if (this.avatars == true) return;
			if (this.userInfo.avatar) {
				// 移出
				uni.navigateTo({
					url: './avter?src=' + this.$store.state.host + this.userInfo.avatar
				});
			} else {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						this.uploadImage(res.tempFilePaths[0]);
					}
				});
			}
		},

		cardimg1() {
			if (this.cardimg == true) return;

			if (this.userInfo.cardimg1) {
				// 移出
				uni.navigateTo({
					url: './card1?src=' + this.$store.state.host + this.userInfo.cardimg1
				});
			} else {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						this.uploadcardimg1(res.tempFilePaths[0]);
					}
				});
			}
		},

		cardimg2() {
			if (this.cardimgs == true) return;

			if (this.userInfo.cardimg2) {
				// 移出
				uni.navigateTo({
					url: './card2?src=' + this.$store.state.host + this.userInfo.cardimg2
				});
			} else {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						this.uploadcardimg2(res.tempFilePaths[0]);
					}
				});
			}
		},

		diploma() {
			if (this.diplomas == true) return;

			if (this.userInfo.diploma) {
				// 移出
				uni.navigateTo({
					url: './diploma?src=' + this.$store.state.host + this.userInfo.diploma
				});
			} else {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						this.uploaddiploma(res.tempFilePaths[0]);
					}
				});
			}
		},

		// sfzzm() {
		// 	if (this.cardimg == true) return;

		// 	if (this.userInfo.cardimg1) {
		// 		uni.navigateTo({
		// 			url: './card1?src=' + this.$store.state.host + this.userInfo.cardimg1
		// 		});
		// 	} else {
		// 		uni.chooseImage({
		// 			count: 1,
		// 			sizeType: ['original', 'compressed'],
		// 			sourceType: ['album', 'camera'],
		// 			success: res => {
		// 				this.uploadcardimg1(res.tempFilePaths[0]);
		// 			}
		// 		});
		// 	}
		// },

		uploadImage(tempFilePaths) {
			this.$http
				.upload(this.$config.UrlSignUpload, {
					filePath: tempFilePaths,
					name: 'file',
					formData: {}
				})
				.then(res => {
					console.log(res);
					if (res.code == 1) {
						this.userInfo.avatar = res?.data?.url;
					} else this.$api.toast(res.msg);
				});
		},

		uploadcardimg1(tempFilePaths) {
			var that = this;
			this.$http
				.upload(this.$config.UrlSignUpload, {
					filePath: tempFilePaths,
					name: 'file',
					formData: {}
				})
				.then(res => {
					if (res.code == 1) {
						that.userInfo.cardimg1 = res?.data?.url;
					} else this.$api.toast(res.msg);
				});
		},

		uploadcardimg2(tempFilePaths) {
			var that = this;
			this.$http
				.upload(this.$config.UrlSignUpload, {
					filePath: tempFilePaths,
					name: 'file',
					formData: {}
				})
				.then(res => {
					if (res.code == 1) {
						that.userInfo.cardimg2 = res?.data?.url;
					} else this.$api.toast(res.msg);
				});
		},

		uploaddiploma(tempFilePaths) {
			var that = this;
			this.$http
				.upload(this.$config.UrlSignUpload, {
					filePath: tempFilePaths,
					name: 'file',
					formData: {}
				})
				.then(res => {
					if (res.code == 1) {
						that.userInfo.diploma = res?.data?.url;
					} else this.$api.toast(res.msg);
				});
		}
	}
};
</script>

<style></style>